<template>
  <div class="infoSet">
    <form class="infoForm">
      <table ng="0" cellspacing="0" cellpadding="10">
        <tr>
          <th>头像：</th>
          <td class="img">
            <div style="float: left;margin-top: 20px">
              <el-upload
                class="avatar-uploader"
                :action= action
                :headers="myHeaders"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
                style="float: left"
              >
                <img v-if="this.$store.state.student.image" :src="this.$store.state.student.image" class="avatar" alt=""/>
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </div>
            <div style="font-size: 12px;float:left;margin-left: 10px; width:80px;margin-top: 60px">点击头像添加或更换头像</div>
          </td>
        </tr>
        <tr>
          <th>账号：</th>
          <td><el-input placeholder="请输入账号" v-model="user.account" :disabled="true"></el-input></td>
        </tr>
        <tr>
          <th>昵称：</th>
          <td><el-input placeholder="请输入昵称" v-model="student.nickname" maxlength="5" show-word-limit></el-input></td>
        </tr>
        <tr>
          <th>手机号：</th>
          <td><el-input placeholder="请输入手机号" v-model="user.phone" :disabled="true"></el-input></td>
        </tr>
        <tr>
          <th>邮箱：</th>
          <td><el-input placeholder="请输入邮箱" v-model="user.email" :disabled="true"></el-input></td>
        </tr>
        <tr>
          <th>性别：</th>
          <td>
            <input type="radio" name="性别" value="男" v-model="student.gender">男
            <input type="radio" name="性别" value="女" v-model="student.gender">女
            <input type="radio" name="性别" value="保密" v-model="student.gender">保密
          </td>
        </tr>
        <tr>
          <th>出生日期：</th>
          <td><el-date-picker v-model="student.birthday" align="right" type="date" id="date"></el-date-picker></td>
        </tr>
        <tr>
          <th>学校：</th>
          <td><el-input placeholder="请输入学校" v-model="student.school" maxlength="12" show-word-limit></el-input></td>
        </tr>
        <tr>
          <th>个人简介：</th>
        </tr>
        <tr>
          <td></td>
          <td><textarea placeholder="请输入个人简介" v-model="student.intro" maxlength="100"></textarea></td>
        </tr>
      </table>
    </form>
    <div class="setButton">
      <el-button type="warning" @click="updateStudent()">保存修改</el-button>
    </div>
  </div>
</template>

<script>
export default {
  inject:['reload'],  //注入依赖
  data(){
    return{
      student: {},
      user: {},
      imageUrl: "",
      myHeaders: {authorization: sessionStorage.getItem("token")},
      action: 'http://localhost:8080/student/updateImage'
    }
  },
  created(){
    this.user=this.$store.state.grades;
    this.student=this.$store.state.student;
  },
  methods:{
    updateStudent:function () {
      this.axios.put(this.baseUrl+"student/update",this.student)
        .then(res =>{
          console.log(res.data);
          alert(res.data.data);
        })
    },
    handleAvatarSuccess(res, file) {
      this.reload();
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/png" || "image/jpg" || "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG/PNG/JPEG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    }
  }
}
</script>

<style scoped>
@import "../../assets/css/student.css";
.avatar-uploader {
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader :hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #6b6b6b;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  border: 1px dashed #fff;
  border-radius: 50%;
  vertical-align: middle;
  object-fit: cover;
  object-position: center;
}
.avatar {
  border-radius: 50%;
  width: 100px;
  height: 100px;
  object-fit: cover;
  object-position: center;
  vertical-align: middle;
}

</style>
